<template>
    <div class="tollProject" id="tollProject">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }">搜索查询支付信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="condition-search">
            <div class="demo-input-suffix">
                <input placeholder="请输入内容" size="mini" prefix-icon="el-icon-search" v-model="inputVal" />
                <el-button type="primary" size="mini" icon="el-icon-search" @click="Sous">搜索</el-button>
            </div>
            <div class="demo-input-suffix">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleEdit(null, null, 'add')">添加</el-button>
            </div>
        </el-row>
        <el-table :data="tableData" v-loading="listLoading" border stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column prop="id" type="selection" label="全选" align="center">
            </el-table-column>
            <el-table-column prop="name" label="项目名称" width="" align="center" style="color:black"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" style="color: #000000;">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row, 'edit')" style="color: #000000;">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="formEditTitle" :visible.sync="dialogFormVisible" >
            <el-form :model="form" :disabled="formEditDisabled">
                <el-form-item label="名称" :label-width="formLabelWidth" >
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDetail">保存</el-button>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        data() {
            return {
                inputVal: '',
                formEditTitle: '收费项目信息',
                formEditDisabled: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                toolPopType: 0,
                listLoading: false,
                currRowData: {},
                pageInfo: {
                    currentPage: 1,
                    pageSize: 10,
                    pageTotal: 80
                }, //分页
                formSearch: {
                    name: '',
                    city: '',
                    type: null,
                    age: '',
                    gender: null,
                    qq: '',
                    startdate: null,
                    enddate: null
                }, //表单查询
                formEdit: {
                    id: null,
                    name: '',
                    city: '',
                    type: '',
                    age: '',
                    gender: null,
                    qq: ''
                }, //表单编辑
                form: {
                    name: ''
                },
                tableData: [],
                searchName: {
                    name: ''
                }
            };
        },
        mounted() {
            var self = this;
            this.onSearch(self.searchName);
        },
        methods: {
            onSearch(search) {
                var self = this;
                apis.contApi.getChargingItems(search).then((data) => {
                    console.info(data.data.data);
                    // self.tableData = data.data.data;
                    self.tableData = data.data.data.chargingItems;
                }).catch((error) => {
                    console.error(error);
                });
            },
            /* 搜索 */
            Sous() {
                var self = this;
                self.searchName.name = self.inputVal;
                self.onSearch(self.searchName);
            },
            /* 点击选择 */
            handleSelectionChange(val) {
                console.info(val);
            },
            /** 分页切换 */
            handleCurrentChange(val) {
                this.pageInfo.currentPage = val;
                this.onSearch();
            },
            /** 分页大小切换 */
            handleSizeChange(val) {
                console.info(val);
            },
            /** 打开详情页-tab页 */
            openDetail(row) {
                this.$common.OpenNewPage(this, 'detail', row);
            },
            /** 查看详情页-弹窗 */
            handleDetail(index, rowData) {
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.dialogType = 'show';
                    this.formEditTitle = '收费项目信息-详情';
                    this.formEditDisabled = true;
                    this.form = Object.assign({}, rowData);
                    this.form.gender += '';
                });
            },
            /** 打开编辑弹窗 */
            handleEdit(index, rowData, type) {
                if(type == 'add') this.toolPopType = 1;
                else if(type == 'edit') this.toolPopType = 2;

                console.info(rowData);
                var self = this;
                self.currRowData = rowData;
                this.dialogFormVisible = true; //等dom渲染完，读取data中初始值，然后再复制，这样重置的是data中初始值
                this.$nextTick(() => {
                    this.dialogType = 'edit';
                    this.formEditTitle = '收费项目信息-编辑';
                    this.formEditDisabled = false;
                    this.form = Object.assign({}, rowData);
                    this.form.gender += ''; //必须转换成字符串才能回显
                });
            },
            /** 删除 */
            handleDelete(index, rowData) {
                console.info('删除');
            },
            /* 提交详情 */
            submitDetail() {
                var self = this;
                self.dialogFormVisible = false;
                delete self.form.id;
                if(self.toolPopType == 1) {
                    apis.contApi.addChargingItems(self.form).then((data) => {
                        console.info(data);
                        this.onSearch(self.searchName);
                    }).catch((error) => {
                        console.error(error);
                    });
                } else if(self.toolPopType == 2) {
                    self.form.id = self.currRowData.id;
                    apis.contApi.editChargingItems(self.form).then((data) => {
                        console.info(data);
                        this.onSearch(self.searchName);
                    }).catch((error) => {
                        console.error(error);
                    });
                }
            }
        },
        filters: {
            convertType: function(type) {
                if(type == 1) {
                    return '留言';
                } else if(type == 2) {
                    return '建议';
                } else if(type == 3) {
                    return 'BUG';
                }
            }
        }
    };
</script>

<style scoped="scoped">
    .hongbao_zanzhu {
        display: block;
        position: fixed;
        text-align: center;
        bottom: 336px;
        width: 230px;
        right: 0;
        font-size: 23px;
        color: #505458;
    }

    .hongbao {
        position: fixed;
        bottom: 0;
        right: 0;
        height: 330px;
        width: 230px;
    }

    .content_inner .el-table th>.cell {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .content_inner .el-table th>.cell .el-dropdown {
        width: 100%;
    }

    .content_inner .el-table th>.cell .el-dropdown span.el-dropdown-link.el-dropdown-selfdefine {
        width: 100%;
    }

    .el-dropdown-menu.el-popper {
        width: 180px;
    }

    .el-breadcrumb {
        padding: 5px 0 0px;
    }

    .el-pagination {
        margin: 20px 0 10px;
        text-align: right;
    }

    .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 33px;
        border-radius: 5px 0 0 5px;
    }
    /* 条件筛选*/

    .condition-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        height: 35px;
        width: 100%;
        text-align: left;
    }

    .condition-search>.demo-input-suffix {
        display: inline-flex;
    }

    .condition-search>.demo-input-suffix:first-child {
        position: absolute;
        left: 0;
    }

    .condition-search>.demo-input-suffix input {
        border: 1px solid #00d1b2;
        height: 30px;
        text-indent: 5px;
        border-radius: 4px 0 0 4px;
        color: #00d1b2;
        outline: none;
    }

    .condition-search>.demo-input-suffix input::-webkit-input-placeholder {
        color: #00d1b2;
    }

    .condition-search>.demo-input-suffix button {
        height: 32px;
    }

    .condition-search>.demo-input-suffix:first-child input.el-input__inner {
        border-radius: 3px 0 0 3px;
    }

    .condition-search>.demo-input-suffix:first-child button.el-button.el-button--primary.el-button--mini {
        border-radius: 0 3px 3px 0;
    }

    .condition-search>.demo-input-suffix:last-child {
        position: absolute;
        right: 0;
    }

</style>
